<template>
    <el-dialog :title="editReceiptTitle" :visible.sync="$store.state.receipt.showReceiptDialog"
               center width="600px">

        <el-form :model="receipt" :rules="rules" :label-position="$store.labelPosition"
                 label-width="30%" ref="receipt">
            <el-row>
                <el-col  :span="20">
                    <el-form-item label="开票日期：" prop="receiptDt">
                        <el-date-picker type="date" placeholder="付款日期" v-model="receipt.receiptDt"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col  :span="20">
                    <el-form-item label="发票号：" prop="receiptNo">
                        <el-input v-model="receipt.receiptNo" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col  :span="20">
                    <el-form-item label="金额：" prop="amount">
                        <el-input-number v-model="receipt.amount"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col  :span="20">
                    <el-form-item label="备注：" >
                        <el-input type="textarea" :row="3" v-model="receipt.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="hideEditDialog()">取 消</el-button>
            <el-button type="primary" @click="saveReceipt()" >确 定</el-button>
        </div>

    </el-dialog>

</template>

<script>
    import { mapState } from 'vuex'
    import {validateNumber} from '@/util/rules'

    export default {
        name: "ReceiptEdit",

        data() {
            return {
                rules:{
                    paidDt:[{ required: true, message: '请输入收款日期', trigger: 'blur' }],
                    receiptDt:[{ required: true, message: '请输入收款日期', trigger: 'blur' }],
                    amount:[{ validator: validateNumber , required: true, message: '请输入金额', trigger: 'blur' }],
                }
            }
        },

        computed: {
            ...mapState({
                receipt: state => state.receipt.receipt,
            }),

            editReceiptTitle(){
                return this.receipt.id > -1 ? "编辑开票" : "增加开票";
            }
        },

        methods: {
            saveReceipt(){
                this.$refs['receipt'].validate((valid) => {
                    console.log("表单验证：", valid);
                    if (valid) {
                        if(this.receipt.id  === -1 ){
                            this.addReceipt();
                        }else{
                            this.editReceipt();
                        }


                    } else {
                        console.log('保存开票验证不通过');
                        return false;
                    }
                });
            },

            async addReceipt(){
                console.log("receipt: ", this.receipt)
                await this.$axios.post('/finance/receipt', this.receipt).then((res) => {
                    this.$myMsg.success('成功创建开票信息。');
                    this.$emit('reload')
                    this.hideEditDialog();
                })
            },

            async editReceipt(){
                await this.$axios.put('/finance/receipt', this.receipt).then((res) => {
                    this.$myMsg.success('成功编辑开票信息。');
                    this.$emit('reload')
                    this.hideEditDialog();
                })

            },

            hideEditDialog(){ // 关闭弹出窗口
                this.$store.commit("receipt/Hide_Receipt_Dialog");
            }
        }
    }
</script>

